<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>账号管理-管理系统</title>
	<meta name="keywords" content="管理系统">
	<meta name="description" content="管理系统">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black"> 
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="{$sys_url.static}layui/css/layui.css" media="all">
    <script src="{$sys_url.static}layui/date.js" charset="utf-8"></script>
    <script src="{$sys_url.static}layui/layui.js" charset="utf-8"></script>
</head>
<body>
	<div>
		<form class="layui-form">
			<div class="layui-form-item layui-elem-quote">
				<label class="layui-form-label">账号</label>
				<div class="layui-input-inline">
					<input type="text" name="account" id="account" autocomplete="off" placeholder="请输入账号" class="layui-input">
				</div>
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-inline">
					<input type="text" name="name" id="name" autocomplete="off" placeholder="请输入姓名" class="layui-input">
				</div>
				<button type="button" class="layui-btn btnSearch" lay-filter="search" lay-submit>查询</button>
				<button type="button" class="layui-btn layui-btn-normal btnAdd">+ 新增</button>
			</div>
		</form>
		<table class="layui-hide" id="tableList" lay-filter="demo"></table>
	</div>
</body>
<script type="text/html" id="statusSwitch">
    <!--0:禁用; 1:启用 -->
    <input type="checkbox" name="status" id="{{d.id}}" value="{{d.status}}" lay-skin="switch" lay-text="禁用|启用" lay-filter="statusDemo" {{ d.status == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="barDemo">
<!--	<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="password">重置密码</a>
	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
	-->
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-xs" lay-event="node" lay-href="{$sys_url.ctr}/role?id_user={{d.id}}" title="角色">角色</a>

	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="add_time">
    {{ dateFormat(d.add_time) }}
</script>
<script>
layui.use('table', function(){
	var table = layui.table;
	var $ = layui.jquery;
    var form = layui.form;
	//加载表格
	table.render({
		elem: '#tableList'
		,url:'{$sys_url.ctr}/getList'
		,cellMinWidth: 80 
                //全局定义常规单元格的最小宽度，layui 2.2.1 新增
		,cols: [[
			{field:'id', width:'20%', title: 'ID', sort: true, align:'center'},
			{field:'name', title: '姓名', align:'center'},
            {field:'role_name', title: '角色' , align:'center'},
			{field:'account', title: '账号', align:'center'},
            {field: 'status', title: '状态', align: 'center', templet: '#statusSwitch', unresize: true},
            {field:'add_time', title: '添加时间', align: 'center',templet: '#add_time'},
			{fixed:'right', width:260, title: '操作', align:'center', toolbar: '#barDemo'}
		]],
		page: true
	});
	//重载表格
	$('.btnSearch').on('click',function(){
		table.reload('tableList',{
			page: {
				curr: 1 
                                //重新从第 1 页开始
			},
			where: {
				key: {
					account: $('#account').val(),
					name: $('#name').val()
				}
			}
		});
	});


    form.on('switch(statusDemo)', function (obj) {
        var id=this.id;
        var status=0;
        if(obj.elem.checked){ status=1}
        $.ajax({
            url: '{$sys_url.ctr}/status',
            type: 'post',
            data: {ids: id,status:status },
            dataType: "json",
            beforeSend: function () {

            },
            success: function (data) {
                console.log(data);
                if (data.code == 1) {
                    var index = parent.layer.getFrameIndex(window.name);
                    //获取当前窗口索引
                    parent.layer.msg('操作成功', {icon: 1});
                } else {
                    layer.alert('抱歉，系统繁忙，请稍后再试！', {icon: 2});
                }
            },
            error: function (data) {
                console.log(data);
                layer.msg('与服务器连接失败', {icon: 2});
            }
        });
    });


	//监听工具条
	table.on('tool(demo)', function(obj){
		var data = obj.data;
        var _this = $(this);
		if(obj.event === 'detail'){
			layer.open({
				title: '查看账号',
				type: 2,
				shade: false,
				area: ['800px', '600px'],
				maxmin: true,
				btnAlign: 'c',
				anim: 0,
				shade: [0.5, 'rgb(0,0,0)'],
				content: 'userLook.html?id='+data.id,
				zIndex: layer.zIndex, 
                                //重点1
				success: function(layero){
					//layer.setTop(layero); //顶置窗口
				},
				yes: function(index, layero){
					//确认按钮
				}
			});
		} else if(obj.event === 'del'){
			layer.confirm('ID：'+data.id+'<br />姓名：'+data.name, {icon: 3, title:'是否确定删除?'}, function(index){
                            console.log(index);
                            if(index>=1)
                            { 
                                $.ajax({
				url:'{$sys_url.ctr}/del',
				type:'post',
				data:{ id:data.id },
				dataType:"json",
				beforeSend:function(){
					 console.log(JSON.stringify(data.field));
				},
				success:function(data){

					if(data.code==1){
                                           
						var index = parent.layer.getFrameIndex(window.name);
                                                
                                                //获取当前窗口索引
						parent.layer.msg('删除成功', {icon : 1}); 
						table.reload('tableList');  
					} else {
						layer.alert('抱歉，系统繁忙，请稍后再试！',{icon:2});
					}
				},
				error:function(data){
					//do something
                                        console.log(data);
					layer.msg('与服务器连接失败',{icon: 2});
				}
			});
			layer.close(index);
                                
			 
                            }
			});
		} else if(obj.event === 'edit'){
			layer.open({
				title: '编辑',
				type: 2,
				shade: false,
				area: ['800px', '600px'],
				maxmin: true,
				btnAlign: 'c',
				anim: 0,
				shade: [0.5, 'rgb(0,0,0)'],
				content: '{$sys_url.ctr}/edit?id='+data.id,
				zIndex: layer.zIndex, //重点1
				success: function(layero){
					//layer.setTop(layero); //顶置窗口
				},
				yes: function(index, layero){
					//确认按钮
				}
			});
		} else if(obj.event === 'node'){


		    parent.layui.index.openTabsPage(_this.attr('lay-href'),_this.attr('title'));


        } else if(obj.event === 'password'){
			layer.confirm('工号：'+data.id+'<br />姓名：'+data.name, {icon: 3, title:'是否确定重置密码?'}, function(index){
				$.ajax({
					url:'user.json',
					type:'get',
					data:'',
					dataType:"json",
					beforeSend:function(){
                                            console.log(JSON.stringify(data.field));
					},
					success:function(data){
                                             // do something
						if(data.code==0){
							layer.msg('恭喜，密码重置成功！',{icon:1});
						} else {
							layer.alert('抱歉，系统繁忙，请稍后再试！',{icon:2});
						}
					},
					error:function(data){
                                            //do something
						layer.msg('与服务器连接失败',{icon: 2});
					}
				});
				layer.close(index);
			});
		}
	});
	//新增
	$('.btnAdd').on('click',function(){
         
		layer.open({
			title: '新增',
			type: 2,
			shade: false,
			area: ['800px', '600px'],
			maxmin: true,
			btnAlign: 'c',
			anim: 0,
			shade: [0.5, 'rgb(0,0,0)'],
			content: '{$sys_url.ctr}/add',
			zIndex: layer.zIndex, 
                        //重点1
			success: function(layero){
				//layer.setTop(layero); //顶置窗口
			},
			yes: function(index, layero){
				//确认按钮
			}
		});
	});
});
</script>
</html>